var items = document.getElementsByClassName("item");
var lis = document.querySelectorAll(".doint li")
var pre = document.querySelector(".pre")
var next = document.querySelector(".next")

var gltems = document.getElementsByClassName("gitem");
var gpre = document.querySelector(".game-pre")
var gnext = document.querySelector(".game-next")

var num =0;

var timer = null



function fn(){
	timer = setInterval(function(){
		num++;
		if(num==3){
			num = 0;
		}
		
		for (var i = 0; i < 3; i++) {
			gltems[i].className = "gitem"
			items[i].className = "item"
			lis[i].className = " "
		}
		gltems[num].className = "gitem gactive";
		items[num].className = "item active";
		lis[num].className = "doint-li"
	},1000)
}

fn();

var banner = document.querySelector(".banner");
var game = document.querySelector(".game-contain")

game.onmouseenter = function(){
	clearInterval(timer)
}
game.onmouseleave = function(){
	fn()
}

banner.onmouseenter = function(){
	clearInterval(timer)
}
banner.onmouseleave = function(){
	fn()
}
pre.addEventListener('click',function(){
	num--;
	if(num<0){
		num=2;
	}
	for (var i = 0; i < 3; i++) {
		items[i].className = "item"
		lis[i].className = " "
	}
	items[num].className = "item active";
	lis[num].className = "doint-li"
})
next.addEventListener('click',function(){
	num++;
	if(num==3){
		num = 0;
	}
	
	for (var i = 0; i < 3; i++) {
		items[i].className = "item"
		lis[i].className = " "
	}
	items[num].className = "item active";
	lis[num].className = "doint-li"
})


gpre.addEventListener('click',function(){
	num--;
	if(num<0){
		num=2;
	}
	for (var i = 0; i < 3; i++) {
		gltems[i].className = "gitem"
	}
	gltems[num].className = "gitem gactive";
})
gnext.addEventListener('click',function(){
	num++;
	if(num==3){
		num = 0;
	}
	
	for (var i = 0; i < 3; i++) {
		gltems[i].className = "gitem"
	}
	gltems[num].className = "gitem gactive";
})